
<template>
    <div class="category">
        <SearchHeader>分类</SearchHeader>
        <div class="category-menu">
            <div class="category-menu-item" v-for="item of categoryMenu" :key="item.id">
                <a class="name" :class="{'menu-hover':targetid===item.id}" @click="gohref(item.id)">
                    {{item.name}}
                </a>
            </div>
        </div>
        <div class="category-content">
            <div class="category-content-item" v-for="item of categoryContent" :key="item.id" :id="'item-id-'+item.id" :data-id="item.id">
                <div class="item-banner" v-if="item.banner">
                    <img class="full" :src="item.banner">
                </div>
                <div class="title-box">
                    <span class="inline-1px inline-1px-left"></span>
                    <span class="title">{{item.title}}</span>
                    <span class="inline-1px inline-1px-right"></span>
                </div>
                <ul class="item-list">
                    <li class="item-imgtext" v-for="item1 of item.list" :key="item1.id">
                        <div class="item-img">
                            <img class="full" :src="item1.img">
                        </div>
                        <p class="item-text">{{item1.name}}</p>
                    </li>
                </ul>
                <div class="enter"><img class="full" :src="item.enterimg"></div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>

import SearchHeader from '@/components/SearchHeader'

import Footer from '@/components/Footer'
import {mapMutations} from 'vuex'

import ElmentObserver from '@/utils/elmentobserver'

export default {
    name: "Category",
    components:{
        SearchHeader,
        Footer
    },
    data() {
        return {
            targetid:1,
            scrollListener:0,
            categoryMenu:[
                {
                    id:1,
                    name:"小米手机"
                },
                {
                    "id":2,
                    "name":"红米手机"
                },
                {
                    "id":3,
                    "name":"黑鲨手机"
                }
            ],
            "categoryContent":[
                {
                    "id":1,
                    "title":"小米数字系列",
                    "banner":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43c675e2416837f1f5fe60daa7698475.jpg?f=webp&w=750&h=300&bg=F99E69",
                    "enterimg":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9276cddcb813125147b73b13c841e8c8.jpg?f=webp&w=750&h=120&bg=FAF4E6",
                    "list":[
                        {
                            "id":1,
                            "name":"小米10至尊版",
                            "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2a47c566e14b2da1a6cc0780060a59d0.png?thumb=1&w=120&h=120"
                        },
                        {
                            "id":2,
                            "name":"小米10",
                            "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120"
                        },
                        {
                            "id":3,
                            "name":"小米10",
                            "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120"
                        },
                        {
                            "id":4,
                            "name":"小米10",
                            "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120"
                        }
                    ],
                },
                {
                    "id":2,
                    "title":"红米Redmi系列",
                    "enterimg":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9276cddcb813125147b73b13c841e8c8.jpg?f=webp&w=750&h=120&bg=FAF4E6",
                    "list":[
                        {
                            "id":1,
                            "name":"红米Redmi",
                            "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2a47c566e14b2da1a6cc0780060a59d0.png?thumb=1&w=120&h=120"
                        },
                        {
                            "id":2,
                            "name":"红米Redmi",
                            "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120"
                        },
                        {
                            "id":3,
                            "name":"红米Redmi",
                            "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120"
                        },
                        {
                            "id":4,
                            "name":"红米Redmi",
                            "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120"
                        }
                    ],
                },
                {
                    "id":3,
                    "title":"黑鲨手机系列",
                    "banner":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43c675e2416837f1f5fe60daa7698475.jpg?f=webp&w=750&h=300&bg=F99E69",
                    "enterimg":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9276cddcb813125147b73b13c841e8c8.jpg?f=webp&w=750&h=120&bg=FAF4E6",
                    "list":[
                        {
                            "id":1,
                            "name":"黑鲨手机",
                            "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2a47c566e14b2da1a6cc0780060a59d0.png?thumb=1&w=120&h=120"
                        },
                        {
                            "id":2,
                            "name":"黑鲨手机",
                            "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120"
                        },
                        {
                            "id":3,
                            "name":"黑鲨手机",
                            "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120"
                        },
                        {
                            "id":4,
                            "name":"小黑鲨手机",
                            "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120"
                        }
                    ],
                },
            ]
        }
    },
    mounted() {
        //底部导航高亮
        this.switchFooterNav(2);
        //获取数据
        //this.getCategoryMenu();
        //监听滚动
        this.oberverScroll();
    },
    methods:{
        observerCallback(res) {
            if(res) {
                let item = res.item;
                this.targetid = parseInt( item.getAttribute('data-id'));
            }
        },
        getCategoryMenu() {
            this.$axios.get('/category/menu').then((res)=>{
                let data = res.data;
                this.categoryMenu = data.categoryMenu;
            })
        },
        oberverScroll() {
            if(this.oberver) {
                return;
            }
            this.oberver = new ElmentObserver({ 
                el:'.category-content-item',
                callback:this.observerCallback,
                rootMargin:'-48.3px 0px 0px 0px'
                //这里为什么要加上rootMargin呢，是因为category-menu是最顶部fixed的高度为48.3，我们需要去掉它那部分高度
            }); 
             this.scrollListener = 1;
        },
        gohref(id) {
            //如果点击菜单滚动到对应区域，需要等scrollTo结束后再重新监听 
            if(this.oberver) {
                this.oberver.stop();
                this.oberver = null;
            }
            if(this.scrollListener) {
                window.removeEventListener('scroll',this.oberverScroll,false);
            }
            let el = document.querySelector('#item-id-'+id);
            window.scrollTo(0,el.offsetTop-48.3);
            window.addEventListener('scroll',this.oberverScroll,false);
        },
        ...mapMutations(['switchFooterNav'])
    }
}
</script>
<style lang="stylus">

@import '../assets/css/theme.styl'

.category
    padding-bottom 500px;

.category-menu
    position fixed;
    top: 48.3px;
    left 0;
    width 87px;
    overflow-x hidden;
    overflow-y scroll
    z-index 2;
    background #fff;
    .category-menu-item
        width:100%;
        height 51.8px;
        line-height 51.8px;
        font-size:15px;
        .name
            display:inline-block;
            color #3c3c3c;

.menu-hover
    font-size:20px;
    color $themecolor !important;

.category-content
    margin-top 48.3px;
    margin-left 87px;
    z-index 1
    padding:0 $mg;
    .category-content-item
        .item-banner
            margin-top 12px;
            width 287px;
            height 115px;
        .title-box
            margin-top 12px;
            width 100%;
            height 73.66px;
            line-height 73.66px;
            display flex;
            justify-content:center;
            align-items center;
            .title
                font-size 16px;
                font-weight: 400;
                margin 0 10px;
            .inline-1px
                width 23px;
                background #e0e0e0 !important;
        .item-list
            display flex;
            justify-content flex-start;
            align-items center;
            flex-wrap: wrap;
            .item-imgtext
                display inline-block;
                width:96px;
                height:88px;
                text-align: center;
                .item-img
                    width:57px;
                    height:57px;
                    margin auto;
                .item-text
                    margin-top 10px;
                    font-size:13.225px;
                    color rgba(0,0,0,.54);
                    text-overflow: ellipsis
        .enter
            width:100%;
            height:46px;


</style>